<template>
  <view class="app">
    <uni-forms
      ref="form"
      :modelValue="formData"
      :rules="rules"
      label-align="center"
    >
      <view class="line-wapper">
        <uni-forms-item label="始发站点" name="startStation" required>
          <uni-easyinput
            type="text"
            v-model="formData.startStation"
            :styles="styles"
            placeholder="请输入始发站点"
          />
        </uni-forms-item>
        <uni-forms-item label="目的站点" name="endStation" required>
          <uni-easyinput
            type="text"
            v-model="formData.endStation"
            :styles="styles"
            placeholder="请输入目的站点"
          />
        </uni-forms-item>
      </view>
      <view class="line-wapper" style="margin-top: 20rpx">
        <uni-forms-item
          label="报价干线价格"
          name="startStation"
          label-position="top"
          label-align="left"
          required
        >
          <uni-easyinput
            type="text"
            v-model="formData.startStation"
            :styles="styles"
            placeholder="请输入始发站点"
          />
        </uni-forms-item>
        <uni-forms-item
          label="时效"
          name="endStation"
          label-position="top"
          required
        >
          <uni-easyinput
            type="text"
            v-model="formData.endStation"
            :styles="styles"
            placeholder="请输入目的站点"
          />
        </uni-forms-item>
      </view>
    </uni-forms>
    <mix-button
      ref="confirmBtn"
      text="提交申请"
      :isConfirm="false"
      marginTop="40rpx"
      @onConfirm="onSave"
    ></mix-button>
  </view>
</template>

<script>
import uniEasyinput from '@/components/uni-easyinput/uni-easyinput.vue';
export default {
  components: {
    uniEasyinput,
  },
  data() {
    return {
      styles: {
        color: '#999999',
      },
      // 表单数据
      formData: {
        startStation: '',
        endStation: '',
        user: '',
        phone: '',
        tell: '',
        address: '',
      },
      rules: {
        // 对startStation字段进行必填验证
        startStation: {
          rules: [
            {
              required: true,
              errorMessage: '请输入始发站点',
            },
            {
              minLength: 3,
              maxLength: 5,
              errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
            },
          ],
        },
        // 对endStation字段进行必填验证
        endStation: {
          rules: [
            {
              required: true,
              errorMessage: '请输入目地站点',
            },
          ],
        },
      },
    };
  },
  onLoad() {},
  methods: {
    onSave() {
      this.$refs.form
        .validate()
        .then((res, err) => {
          console.log('表单数据信息：', res, err);
        })
        .catch((err) => {
          console.log('表单错误信息：', err);
        });
    },
    navBack() {
      uni.navigateBack();
    },
  },
};
</script>

<style>
page {
  background: #f7f8f9;
}
</style>
<style scoped lang="scss">
.app {
  margin-top: 20rpx;
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #f7f8f9;
}
.line-wapper {
  margin-top: 20rpx 0;
  background: #fff;
  padding: 20rpx 20rpx 1rpx 20rpx;
  border-radius: 20rpx;
}
</style>
